import React, { Component } from 'react'
import './App.scss'
import classnames from 'classnames'
// import app from './App.module.css'
// import Home from './Home'
// import About from './About'
export default class App extends Component {
  state = {
    isShow: false
  }
  render() {
    const { isShow } = this.state
    return (
      <div>
        {/* <h1 className={app.title}>App</h1> */}
        <h1 className="title">App</h1>
        <h1 className="title size">App</h1>
        <h1 className={classnames(['title', 'size'])}>App</h1>
        <h1 className={classnames(['title', isShow ? 'size' : ''])}>App</h1>
        <h1 className={classnames(['title', { size: isShow }])}>App</h1>
        <h1 className={classnames({ title: true, size: true })}>App</h1>
        <button onClick={() => this.toggle()}>toggle</button>
        {/* <Home />
        <About /> */}
      </div>
    )
  }
  toggle() {
    // this.state.isShow = !this.state.isShow
    // console.log(this.state.isShow)
    this.setState({
      isShow: !this.state.isShow
    })
  }
}
